<template>
  <div>
      <h1>App组件</h1>
      <my-child title="props标题内容">
        
        <!-- <template #default>
          <p>这是插槽内容2</p>
        </template> -->

        <template #lisi>
          <p>这是插槽内容2</p>
        </template>

        <p>这是插槽内容3</p>

      </my-child>


      <todo-list :todos="todos">
          <template v-slot="{item,index}">
              <span :style="{color:index%2===1?'pink':'yellow'}">{{index+1}}--{{item.title}}</span>
          </template>
      </todo-list>
  </div>
</template>

<script>
import TodoList from './todolist.vue'
import MyChild from './MyChild.vue'
  export default {
  components: { MyChild ,TodoList},
    name:'App',
    data(){
      return{
        todos:[
          {id:'1',title:'AAA',complete:true},
          {id:'2',title:'BBB',complete:true},
          {id:'3',title:'CCC',complete:false},
        ]
      }
    }
  }
</script>

<style scoped>
    
</style>